import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  DashboardOutlined,
  ApartmentOutlined,
  UserOutlined,
  SettingOutlined,
  FileTextOutlined,
  BarChartOutlined,
  SafetyOutlined,
  MessageOutlined,
  RobotOutlined,
  CustomerServiceOutlined,
} from '@ant-design/icons';

// 图标映射
const iconMap = {
  DashboardOutlined: <DashboardOutlined />,
  ApartmentOutlined: <ApartmentOutlined />,
  UserOutlined: <UserOutlined />,
  SafetyOutlined: <SafetyOutlined />,
  SettingOutlined: <SettingOutlined />,
  FileTextOutlined: <FileTextOutlined />,
  BarChartOutlined: <BarChartOutlined />,
  MessageOutlined: <MessageOutlined />,
  RobotOutlined: <RobotOutlined />,
  CustomerServiceOutlined: <CustomerServiceOutlined />,
};

// 菜单项接口
export interface MenuItem {
  key: string;
  label: string;
  icon?: string;
  path?: string;
  children?: MenuItem[];
}

interface CustomMenuProps {
  items: MenuItem[];
  collapsed: boolean;
  className?: string;
}

const CustomMenu: React.FC<CustomMenuProps> = ({ items, collapsed, className = '' }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const [selectedKey, setSelectedKey] = useState<string>('');

  // 初始化选中状态
  useEffect(() => {
    const pathname = location.pathname;
    let currentSelectedKey = '';

    // 查找当前选中的菜单项
    const findSelected = (menuItems: MenuItem[]) => {
      for (const item of menuItems) {
        if (item.path === pathname) {
          currentSelectedKey = item.key;
          return true;
        }
        
        if (item.children && item.children.length > 0) {
          if (findSelected(item.children)) {
            return true;
          }
        }
      }
      return false;
    };

    findSelected(items);
    setSelectedKey(currentSelectedKey);
  }, [location.pathname, items]);

  // 处理菜单点击
  const handleMenuClick = (item: MenuItem) => {
    if (item.path) {
      navigate(item.path);
      setSelectedKey(item.key);
    }
  };

  // 渲染菜单项
  const renderMenuItem = (item: MenuItem, level = 0) => {
    const hasChildren = item.children && item.children.length > 0;
    const isSelected = selectedKey === item.key;
    const icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : null;

    if (hasChildren) {
      // 目录样式 - 类似Antd文档
      return (
        <div key={item.key} className="menu-category">
          <div className="menu-category-title">
            {icon && <div className="menu-category-icon">{icon}</div>}
            {!collapsed && <span className="menu-category-label">{item.label}</span>}
          </div>
          {!collapsed && (
            <div className="menu-category-content">
              {item.children?.map(child => renderMenuItem(child, level + 1))}
            </div>
          )}
        </div>
      );
    }

    // 普通菜单项
    return (
      <div
        key={item.key}
        className={`menu-item ${level === 0 ? 'menu-item-primary' : 'menu-item-secondary'} ${
          isSelected ? 'menu-item-selected' : ''
        }`}
        onClick={() => handleMenuClick(item)}
      >
        {/* 图标 */}
        {icon && (
          <div className="menu-item-icon">
            {icon}
          </div>
        )}

        {/* 标题 */}
        {!collapsed && (
          <div className="menu-item-content">
            <span className="menu-item-title">{item.label}</span>
          </div>
        )}

        {/* 选中指示器 */}
        {isSelected && <div className="menu-item-indicator" />}
      </div>
    );
  };

  return (
    <div className={`custom-menu-container ${collapsed ? 'collapsed' : ''} ${className}`}>
      <div className="menu-content">
        {items.map(item => renderMenuItem(item))}
      </div>
    </div>
  );
};

export default CustomMenu; 